<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .email-sug {
            overflow: hidden;
            display: none;
            height: 130px;
            max-width: 310px;
            border: 2px solid #E1E1E1;
        }
        
        .email-sug li {
            font-size: 20px;
            height: auto;
            max-width: 300px;
            color: #C7C7C7;
            padding-left: 10px;
        }
        
        .email-input {
            outline: none;
            height: 50px;
            width: 300px;
            border: 2px solid #E1E1E1;
            font-size: 20px;
            padding-left: 10px;
        }
        
        .active {
            background-color: #FFC4CF;
        }
        
        li {
            list-style: none;
        }
        
        li:hover {
            background-color: #BDDFED;
        }
    </style>
</head>

<body>
    <div class="wrapper">
        <input id="email-input" class="email-input" type="text">
        <ul id="email-sug-wrapper" class="email-sug"></ul>
    </div>
    <script>
        var input = document.getElementById('email-input');
        var ul = document.getElementById('email-sug-wrapper');
        var postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];
        // 页面加载完即获得焦点
        input.focus();
        input.addEventListener('input', function() {
            judge();
            while (ul.firstChild) {
                ul.removeChild(ul.firstChild);
            }
            addToWrapper();
        });

        ul.addEventListener('click', function(event) {
            var event = event || window.event;
            var target = event.target || event.srcElement;
            if (target.nodeName.toLowerCase() == 'li') {
                input.value = transimite(target.innerHTML);
                ul.setAttribute('style', 'display:hide');
            }
        })

        input.addEventListener('keyup', function(event) {
            console.log(event.keyCode);
            let active = document.querySelector('.active');
            let nodes = document.querySelectorAll('li');
            let index = 0;
            for (let i = 0; i < nodes.length; i++) {
                if (nodes[i] == active) {
                    index = i;
                }
            }
            // 下
            if (event.keyCode == 40) {
                if (index == nodes.length - 1) {
                    console.log('到底了')
                    return false;
                }
                nodes[index].removeAttribute('class');
                index++;
                nodes[index].setAttribute('class', 'active');
            }
            // 上
            if (event.keyCode == 38) {
                if (index == 0) {
                    console.log('到顶了')
                    return false;
                }
                nodes[index].removeAttribute('class');
                index--;
                nodes[index].setAttribute('class', 'active');
            }
            if (event.keyCode == 13) {
                input.value = nodes[index].innerHTML;
                ul.setAttribute('style', 'display:hide')
            }
            // 全选内容
            if (event.keyCode == 27) {
                input.select();
            }
        })

        // 对于特殊字符进行转义编码
        function transimite(origin) {
            var grex = "";
            switch (origin) {
                case '&':
                    grex = origin.replace(/&/g, "&");
                    break;
                case '<':
                    grex = origin.replace(/</g, "<");
                    break;
                case '>':
                    grex = origin.replace(/>/g, "&rt;");
                    break;
                case '<br>':
                    grex = origin.replace(/<br>/g, "br&rt;");
                    break;
                case '\'':
                    grex = origin.replace(/\'/g, "'");
                    break;
                case '\"':
                    grex = origin.replace(/\"/g, '"');
                    break;
            }
            if (grex == "") {
                return origin;
            } else {
                return grex;
            }
        }

        function getInput() {
            return input.value.trim();
        }

        function getTips() {
            let inputText = transimite(getInput());
            lis = [];
            let pre = inputText,
                post = '';
            postfixList.sort(function(a, b) {
                return a.localeCompare(b);
            });
            if (inputText.split('').indexOf('@') !== -1) {
                let index = inputText.split('').indexOf('@');
                pre = inputText.substr(0, index);
                post = inputText.substr(index + 1, inputText.length);
            }
            var theList = [];
            var count = 0;
            for (var i in postfixList) {
                // indexOf 返回第一次出现的位置 前缀匹配 即是在位置0就匹配
                if (postfixList[i].indexOf(post) == 0) {
                    var li = document.createElement('li');
                    li.innerHTML = pre + "@" + postfixList[i];
                    theList.unshift(li);
                } else {
                    count++;
                }
            }
            if (count == postfixList.length) {
                for (var j in postfixList) {
                    var li = document.createElement('li');
                    li.innerHTML = pre + "@" + postfixList[j];
                    theList.unshift(li);
                }
            }
            return theList;
        }

        function addToWrapper() {
            let lis = getTips();
            lis[0].setAttribute('class', 'active');
            for (let li of lis) {
                ul.appendChild(li);
            }
        }

        function judge() {
            var inputText = input.value.trim();
            if (inputText == '') {
                hide();
            } else {
                show();
            }
        }

        function hide() {
            ul.setAttribute('style', 'display:hide');
        }

        function show() {
            ul.style.display = 'block';
        }
    </script>
</body>

</html>